<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import { category, search } from "@/api/diagnose"
import {ref} from "vue";

const searchCategoryKeyWord = ref("");
const searchPid = ref()
const categoryOptions = ref([])
const diagnoseOptions = ref([])
const selCategoryOptions = ref([])
const selDiagnoseOptions = ref([])
const selCategoryIds = ref([])
const selDiagnoseIds = ref([])
/**
 * 搜索疾病分类
 */
const searchCategory = async () => {
  const res = await category({name:searchCategoryKeyWord.value})
  categoryOptions.value = res.data
}
/**
 * 搜索疾病
 */
const searchDiagnose = async (pid) => {
  const res = await search({pid})
  diagnoseOptions.value = res.data
}
const categoryClick = (pid) => {
  searchPid.value = pid
  searchDiagnose(pid)
}
const categoryChange = async(e) => {
  let ids = selDiagnoseIds.value
  const res = await search({pid: searchPid.value})
  const newIds = res.data.map(item=>item.id)
  if (e) {
    for (const newId of newIds) {
      ids.push(newId)
    }
    for (const newDiagnose of res.data) {
      selDiagnoseOptions.value.push(newDiagnose)
    }
  } else {
    ids = ids.filter(id => !newIds.includes(id));
    selDiagnoseOptions.value.filter(item => newIds.includes(item.id))
  }
  selDiagnoseIds.value = ids;
  selCategoryOptions.value = categoryOptions.value.filter(item=>selCategoryIds.value.includes(item.id))
}
const diagnoseChange = e => {
  console.log(e)
}
const clearAll = () => {
  selDiagnoseOptions.value = []
  selCategoryOptions.value = []
  selDiagnoseIds.value = []
  selCategoryIds.value = []
}
const closeDiagnose = (id) => {
  console.log(id)
  selDiagnoseOptions.value = selDiagnoseOptions.value.filter(item=>item.id !== id)
  selDiagnoseIds.value = selDiagnoseIds.value.filter(item=>item !== id)
}
const init = (data) => {
  console.log("data=", data)
  categoryOptions.value = data
  diagnoseOptions.value = data[0].children
  selCategoryOptions.value = data
  for (const d of data) {
    selDiagnoseOptions.value = selDiagnoseOptions.value.concat([...d.children])
    selDiagnoseIds.value = selDiagnoseIds.value.concat(d.children.map(item=>item.id))
  }
  selCategoryIds.value = data.map(item=>item.id)
}
defineExpose({
  selDiagnoseIds,
  selCategoryOptions,
  init
})
</script>

<template>
  <div class="wrapper">
    <div class="panel">
      <div class="search">
        <el-input placeholder="输入疾病分类" v-model="searchCategoryKeyWord" @input="searchCategory"></el-input>
        <div class="select">
          <el-checkbox-group v-model="selCategoryIds">
            <div class="option" v-for="(c, ck) in categoryOptions" :key="ck" @click="categoryClick(c.id)">
              <el-checkbox :value="c.id" @change="categoryChange">{{ c.name }}</el-checkbox>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="search">
        <el-input placeholder="输入疾病名称" @change="searchDiagnose"></el-input>
        <div class="select">
          <el-checkbox-group v-model="selDiagnoseIds">
            <div class="option" v-for="(c, ck) in diagnoseOptions" :key="ck">
              <el-checkbox :value="c.id" @change="diagnoseChange">{{ c.name }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="preview">
      <div class="tabs">
        <div class="tab" v-for="(sc, sck) in selCategoryOptions" :key="sck">{{ sc.name }}</div>
      </div>
      <div class="body">
        <div class="head">
          <div class="title">疾病名称</div>
          <el-button type="primary" link @click="clearAll">清除全部</el-button>
        </div>
        <div class="list">
          <el-tag class="mr-8 mb-8" type="info" v-for="(sd, sdk) in selDiagnoseOptions" :key="sdk" closable @close="closeDiagnose(sd.id)">{{ sd.name }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-input {
  width: 100% !important;
  height: auto !important;
}
.wrapper {
  display: flex;
  height: 350px;
  overflow: hidden;

  .panel {
    flex-shrink: 0;
    width: 250px;
    height: 100%;
    border-right: 1px solid #e8eaec;

    .search {
      padding: 10px 10px 0 10px;
    }

    .select {
      position: relative;
      margin-top: 5px;
      height: 304px;
      overflow-y: auto;

      .option {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;

        .arrow {
          margin-left: auto;
        }

        &.active {
          color: #409eff;
          background: #f5f7fa;
        }
      }
    }
  }

  .preview {
    flex: 1 0 0;

    .tabs {
      padding: 5px 10px;
      display: flex;
      overflow-x: auto;

      .tab {
        flex-shrink: 0;
        margin-right: 6px;
        padding: 2px 10px;
        background: #f5f7fa;
        border-radius: 5px;
        cursor: pointer;

        &.active {
          background: #409eff;
          color: #fff;
        }
      }
    }

    .body {
      padding: 0 10px;

      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
      }

      .list {
        height: 270px;
        overflow-y: auto;
      }
    }
  }
}
</style>
